<template>
  <div  class="site-panel" :class="'site-panel--' + layoutSkin">
      <ul>
         <li v-for="(item,index) in menuList"
           class="site-panel__li"
           :key="index">
           <div class="site-panel__box">
             <div class="title" @click="routeHandle(item)">
               <icon-svg v-if="item.menupic" :name="item.menupic"></icon-svg>
               <span>{{ item.menuname }}</span>
             </div>
             <div class="box">
                <div v-for="(el,i) in item.children" :key="i" @click="mainRouteHandle(el)" class="text">
                  <icon-svg v-if="el.menupic" :name="el.menupic"></icon-svg>
                  <span>{{ el.menuname }}</span>
                </div>
             </div>
           </div>
         </li>
      </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  },
  computed: {
    menuList: {
      get() { return this.$store.state.common.menuList; }
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const body = document.querySelector('body');
      if (body.append) {
        body.append(this.$el);
      } else {
        body.appendChild(this.$el);
      }
    });
  },
  methods: {
    routeHandle(el) {
      // const fullPath = this.$route.fullPath;
      const menuurl = el.menuurl;
      if (menuurl) {
        this.$router.push({ path: el.menuurl });
        // if (fullPath === el.menuurl) {
        //   this.$router.push({ path: 'redirect' });
        // } else {
        //   this.$router.push({ path: el.menuurl });
        // }
      }
    },
    mainRouteHandle(el) {
      this.$router.push({ path: el.menuurl });
      // const fullPath = this.$route.fullPath;
      // if (fullPath === el.menuurl) {
      //   this.$router.push({ path: 'redirect' });
      // } else {
      //   this.$router.push({ path: el.menuurl });
      // }
    }
  }
};
</script>

<style>

</style>